<template>
<div class="register_body">
  <div class="register_box">
    <!-- <div class='register_title'><span>注册界面</span></div> -->
    <el-divider><div class="register_title_span"><span>注册</span></div></el-divider>
    <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="100px">
    
        <el-form-item label='学号' prop="stuid">
            <el-input v-model="registerForm.stuid" class="register_input"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="registerForm.password" class="register_input"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="registerForm.checkPass" class="register_input"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
            <el-input v-model="registerForm.nickName" class="register_input"></el-input>
        </el-form-item>
        <div class='register_btn'>
            <el-button type="primary" @click="doRegister">注册</el-button>
            <el-button type="primary" @click="toUserlogin">登录</el-button>
        </div>
    </el-form>
  </div>
  </div>
</template>

<script>
export default {
  components: {
    
  },
  mounted() {
    
  },
  data() {
    var validatePass = (rule, value, callback) =>{
        if(value !== this.registerForm.password){
            callback(new Error("两次输入密码不一致！"));
        }else{
            callback();
        }
    };
    return {
      registerForm:{
          stuid: "",
          password: "",
          checkPass: "",
          nickName: '',
      },
      rules:{
          stuid:[ 
                {required: true, message:"不能为空",trigger: 'blur'},
                {min: 9, max: 10, message:'长度在9~10位', trigger: 'blur'},],
          password:[
                {required: true, message:"不能为空",trigger: 'blur'},
                {min: 6, message:'密码至少六位', trigger:'blur'},],
          checkPass:[
                {required: true, message:"不能为空",trigger: 'blur'},
                {min: 6, message:'密码至少六位', trigger:'blur'},
                {validator: validatePass, trigger: 'blur'},],
          nickName:[
                {required: true, message:"不能为空",trigger: 'blur'},],
      }
    }
  },
  methods: {
      doRegister(){
        this.$refs["registerForm"].validate((valid) => {
            if (valid) {
                var {stuid, password, nickName} = this.registerForm
                var data = {stuid, password, nickName}
                console.log("register_data", data);
                // return ;
                this.$http1({
                    url: this.$http.adornUrl("/user/login/user/register"),
                    method: "post",
                    data: this.$http.adornData(data, false)
                }).then(({ data }) => {
                    this.$message({
                        type: "success",
                        message: "成功!",
                    });
                    console.log("register", data)
                
                });
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    toUserlogin(){
        this.$router.replace({name: 'userlogin'})
    }
  },
}
</script>

<style>
.register_body{
    background-image: url(http://localhost:88/api/user/test_pic/background_bili.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    position: absolute;
    height: 100%;
    width: 100%;
    min-width: 980px;
}
.register_box{
    width: 500px;
    height: 400px;
    margin: 150px auto 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 5px #eee;
    background: #fff;
}
.register_title_span{
    font-size: 20px;
}
.register_title{
    text-align: center;
    height: 50px;
}
.register_title span{
    font-size: 20px;
}
.register_input{
    width: 90%;
}
.register_btn{
    display: flex;
}
.register_btn button{
    width: 120px;
    margin: 0 auto;
}
</style>